<template>
	<view class="settle_containor">
		<view class="left">
			<label class="radio" @click="changeAllstatus">
				<radio :checked="isFull" color="#c00000"/><text>全选</text>
			</label>
		</view>
		<view class="center">
			<text>合计：</text>
			<text class="red">￥{{TotalAmount}}</text>
		</view>
		<view class="right" @click="goAmount">
			<text>结算</text>
			<text>({{checkedAll}})</text>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations,mapState} from 'vuex';
	export default {
		name:"settle-accounts",
		data() {
			return {
				
			};
		},
		computed:{
			...mapGetters('car',['checkedAll','total','TotalAmount']),
			...mapState('users',['address','token']),
			isFull(){
				// checkedAll ：选中的合计数量  total：购物车商品总数量
				return this.total == this.checkedAll;
			}
		},
		methods:{
			...mapMutations('car',['updateAllstatus']),
			changeAllstatus(){
				// !isFull的意思是点击的时候 选中状态肯定要取反
				this.updateAllstatus(!this.isFull);
			},
			goAmount(){
				if(!this.TotalAmount) return uni.$showMsg('请点击要结算的商品');
				if(JSON.stringify(this.address) == "{}"){
					return uni.$showMsg('请填写收货地址');
				};
				if(!this.token) return uni.$showMsg('请登录');
			}
		}
	}
</script>

<style lang="scss" scoped>
.settle_containor{
	border-top: 4rpx solid #D6D6D6;
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 98%;
	height: 160rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	font-size: 34rpx;
	padding: 0 20rpx;
	.lfet{
		width: 35%;
		height: 100%;
	}
	.center{
		line-height: 100%;
		.red{
			color: #c00000;
		}
	}
	.right{
		width: 20%;
		line-height: 100%;
		background-color: #c00000;
		color: white;
		text-align: center;
		padding: 60rpx 50rpx;
		&.active{
			opacity: 0.6;
		}
	}
}
</style>
